<template>
  <div class="shopCart">
    <div class="myCartHeard">
      <div><i class="el-icon-shopping-cart-2"></i> 我的购物车</div>
    </div>
    <div
      v-for="(item, index) in shopCart.list"
      :key="index"
      class="shopCartItem"
      :class="{ shopCartItemHover: item.checked }"
    >
      <div class="inlineBlock" style="margin-right: 10px;">
        <input class="input1" type="checkbox" name="shopCart" v-model="item.selected" @click="checkedHandle(item)" />
      </div>
      <router-link :to="{ name: 'introduce', query: { commodityId: item.cartId } }">
        <div class="inlineBlock">
          <img :src="item.pthumbnail" />
        </div>
        <div class="inlineBlock itemName">
          <span>{{ item.gname }}</span>
        </div>
      </router-link>
      <div class="itemcenter">
        <div class="inlineBlock" style="vertical-align: top; margin-right: 50px;">
          <span class="oldPrice">￥{{ item.gprice }}</span>
          <br />
          <span class="newPrice">￥{{ item.gprice }}</span>
        </div>
        <div class="inlineBlock" style="margin-right: 50px;">
          <el-input-number v-model="item.num" size="small" :min="1" @change="update(item)"></el-input-number>
        </div>
        <div class="inlineBlock" style="margin-right: 50px;">
          <span style="color: #F56C6C; font-size: 24px;">￥{{ (item.gprice * item.num).toFixed(1) }}</span>
        </div>
        <div class="inlineBlock" style="vertical-align: top;">
          <el-button type="text" @click="moveToCollect(index)">移入收藏夹</el-button>
          <br />
          <el-button type="text" style="color: #F56C6C;" @click="remove(item)">删除</el-button>
        </div>
      </div>
    </div>
    <div class="bottomPay">
      <div class="inlineBlock" style="height: 60px; margin-right: 800px; font-size:14px; line-height: 60px;">
        <input class="input2" type="checkbox" name="checkAll" v-model="Allcheck" @change="checkAll" /> 全选
      </div>
      <div class="inlineBlock" style="height: 60px; line-height: 60px;">
        合计：<span style="color: #f40; font-size: 24px;">￥{{ allPrice['cart/allPrice'] }}</span>
      </div>
      <div class="inlineBlock payButton">
        <a
          href="javascript:void(0);"
          :class="{ activeButton: allPrice['cart/allPrice'] > 0 }"
          @click="dialogVisible = true"
        >
          <span>结 算</span>
        </a>
      </div>
    </div>

    <el-dialog title="支付" :visible.sync="dialogVisible" width="30%">
      <div>
        <div v-for="(item, index) in allPrice['cart/orderData']" :key="index" class="payItem">
          <span>商品：{{ item.gname }}</span>
          <br />
          <span>数量：{{ item.num }}</span>
          <br />
          <span
            >价格：<span style="color: #f40;">￥{{ item.num * item.gprice }}</span></span
          >
        </div>
        <div>
          <span style="font-size: 24px;"
            >合计：<span style="color: #f40;">￥{{ allPrice['cart/allPrice'] }}</span></span
          >
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="payConfirm" size="small">支 付</el-button>
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return { checkedShopcart: [], Allcheck: false, goods: [], checkedAll: false, dialogVisible: false }
  },
  methods: {
    //修改商品数量时同步修改数据库数据
    async update(item) {
      this.$store.dispatch('cart/asyncChangeNum', {
        cartId: item.cartId,
        num: item.num,
        sumprice: item.gprice
      })
    },
    // 点击单选框
    checkedHandle(item) {
      this.$store.commit('cart/radioSelecte', item)
    },
    // 移入收藏夹
    moveToCollect(index) {
      var that = this
      var id = JSON.parse(localStorage.getItem('user')).id
      let ShopCart_Src = '/cart/listByUser?userId=' + id
      let collect_id = this.shopCart[index].goods_Id
      this.$axios
        .get(ShopCart_Src, {
          params: {
            ct_UserID: id,
            goods_ID: this.shopCart[index].goods_ID
          }
        })
        .then(function(response) {
          //console.log(response.data);
          console.log('已经收藏货物为：')
          console.log(that.goods)
          for (let i = 0; i < response.data.length; i++) {
            if (collect_id == response.data[i].goodsId) {
              let temp = {
                goods_ID: collect_id,
                goods_Name: response.data[i].name,
                goods_Picture: 'http://202.193.52.12:8080/' + response.data[i].thumbnail,
                price: response.data[i].price
              }
              temp.goods_OldPrice = temp.price
              temp.goods_NewPrice = temp.price
              that.goods.push(temp)
            }
          }
          console.log('收藏货物为：')
          console.log(that.goods)
          localStorage.setItem('collect_goods', JSON.stringify(that.goods))
          //console.log(response);
          alert('商品已移入收藏夹！')
        })
        .catch(function(error) {
          alert(' 收藏失败！')
          console.log(error)
        })
    },
    // 从购物车中删除该商品
    remove(item) {
      const userInFo = this.$store.state.user.profile
      this.$store.dispatch('cart/updateList', { cartId: item.cartId, userId: userInFo.userId })
    },
    // 全选
    checkAll() {
      this.$store.commit('cart/allSelected', this.Allcheck)
    },
    // 确认支付提示框
    payConfirm() {
      this.dialogVisible = false
      const userInFo = this.$store.state.user.profile
      let goodsIdList = this.allPrice['cart/orderData']
      let data = {
        // goodsIdList: goodsIdList.map(item => item.cartId),
        goodsIdList: [...goodsIdList.map(item => String(item.cartId))]+'',
        totalprice: this.allPrice['cart/allPrice'],
        userId: userInFo.userId
      }
      this.$store.dispatch('cart/myOrder', { ...data })
    }
  },
  created() {},
  computed: {
    shopCart: function() {
      return this.$store.state.cart
    },
    allPrice() {
      return this.$store.getters
    }
  }
}
</script>

<style scoped lang="less">
.itemcenter {
  display: inline-block;
  margin-top: 15px;
}
.input1 {
  width: 30px;
  height: 30px;
  transform: translateY(100%);
}

.input2 {
  width: 20px;
  height: 20px;
  transform: translateY(20%);
}

.payItem {
  width: 360px;
  margin: 0 auto;
  border: 1px solid #909399;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 20px;
}
.payItem:hover {
  border: solid 2px #f56c6c;
}

.shopCartItem {
  display: flex;
  width: 1200px;
  box-sizing: border-box;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  margin-bottom: 10px;
}

.shopCartItemHover {
  border: solid 2px #f56c6c;
  border-radius: 4px;
}

.shopCartItem img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  vertical-align: top;
}

.inlineBlock {
  display: inline-block;
}

.itemName {
  width: 200px;
  font-size: 16px;
  margin-left: 20px;
  margin-right: 200px;
  vertical-align: text-top;
}

.newPrice {
  font-size: 22px;
}

.oldPrice {
  color: #909399;
  text-decoration: line-through;
}

.bottomPay {
  position: relative;
  width: 1200px;
  height: 60px;
  background-color: #e5e5e5;
}

.payButton {
  position: absolute;
  right: 0;
  width: 120px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
}

.payButton a {
  display: inline-block;
  width: 120px;
  height: 60px;
  text-decoration: none;
  background: #b0b0b0;
  color: #fff;
  cursor: not-allowed;
}

.activeButton {
  background-color: #f40 !important;
  color: white !important;
  cursor: pointer !important;
}
.myCartHeard {
  background-color: #fff;
  font-size: 25px;
  margin-bottom: 10px;
  padding: 20px;
  border-bottom: 2px solid #e0a074;
  .el-icon-shopping-cart-2 {
    color: #ff4400;
  }
}
</style>
